<script setup lang="ts"></script>
<template>
  <div class="step">
    <div class="top">
      <div class="ok">
        <img src="@/assets/ok.svg" alt class="img" />
      </div>
      <p class="title">提交成功</p>
      <p class="descr">您所提交的材料真正审核中，也可 关注小程序查看申办进程：）</p>
    </div>
    <!-- 进度条 -->
    <div class="bottom">
      <Result />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw, ref, computed } from "vue";
import { useStore } from "vuex";
import Result from "./step3-result.vue";
export default defineComponent({
  components: {
    Result
  },
  setup() {
    return {};
  }
});
</script>

<style lang="less" scoped>
.step {
  padding: 50px 60px 136px;

  .top {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .ok {
      @wh: 72px;
      background: rgba(58, 193, 126, 1);
      height: @wh;
      width: @wh;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: @wh;
      margin-bottom: 24px;
    }

    .title {
      color: rgba(0, 0, 0, 0.85);
      font-size: 24px;
      margin-bottom: 20px;
    }

    .descr {
      color: rgba(56, 56, 56, 1);
      font-size: 16px;
      margin-bottom: 28px;
    }
  }

  // 进度条
  .bottom {
  }
}

.right {
  display: flex;
  justify-content: flex-end;
}
</style>
